<!DOCTYPE html>
<html xmlns:layout="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
	layout:decorate="~{common/layout}">

<head>
	<meta charset="UTF-8">
	<title>数据源管理</title>
	<style>

	</style>
</head>

<body>
	<div layout:fragment="fragment_body">
		<div class="toolbar">
			<div style="margin-right: 12px; width: 220px;">
				<el-input placeholder="请输入数据源名称"></el-input>
			</div>
			<div style="flex: 1 1 0%;">
				<el-button-group>
					<el-button @click="changeStatus(null)" :type="listStatus == null ?'primary':''"
						icon="Document">全部</el-button>
					<el-button @click="changeStatus(0)" :type="listStatus == 0 ?'primary':''"
						icon="CircleCheck">已绑定</el-button>
					<el-button @click="changeStatus(1)" :type="listStatus == 1 ?'primary':''"
						icon="CircleClose">未绑定</el-button>
				</el-button-group>
			</div>
			<el-button v-if="list !== null && list.length > 0" type="primary" @click="openForm(null)"
				icon="DocumentAdd">新建数据源</el-button>
		</div>
		<div  v-loading="listLoading">
			<el-empty description="暂无数据源配置" v-if="list == null || list.length == 0">
				<el-button type="primary" @click="openForm(null)" icon="DocumentAdd">开始新建</el-button>
			</el-empty>
			<el-table :data="list" v-if="list !== null && list.length > 0" border style="width: 100%;margin-top: 12px;">
				<el-table-column prop="datasourceName" label="数据源名称" width="200">
					<template #default="scope">
						<el-link :underline="false" type="primary"
							@click="openDetail(scope.row)">{{scope.row.datasourceName}}</el-link>
					</template>
				</el-table-column>
				<el-table-column prop="datasourceCode" label="编号" width="100"></el-table-column>
				<el-table-column prop="datasourceType" label="数据源类型" width="200"></el-table-column>
				<el-table-column prop="datasourceId" label="前缀" width="200"			>
					<template #default="scope">
						{{scope.row.datasourceOss.ossPrefix}}
					</template>
				</el-table-column>
				<el-table-column prop="nodeCode" label="已绑定节点">
					<template #default="scope">
						<span type="danger" v-if="scope.row.nodes == null || scope.row.nodes.length == 0">暂未绑定</span>
						<el-descriptions width="100" column="4"
							v-if="scope.row.nodes != null || scope.row.nodes.length > 0">
							<block v-for="(node, nindex) in scope.row.nodes">
								<el-descriptions-item label="">{{node.nodeCode}}</el-descriptions-item>
								<el-descriptions-item label="">{{node.dnDsId}}</el-descriptions-item>
								<el-descriptions-item label="">
									<el-tag size="small" type="success" v-if="node.dnStatus == 0">已绑定</el-tag>
									<el-tag size="small" type="danger" v-if="node.dnStatus == 1">未绑定</el-tag>
								</el-descriptions-item>
								<el-descriptions-item label="">
									<el-button size="small" @click="handleNode('DEL', scope.row.datasourceId, node.dnNodeId)" icon="Delete"></el-button>
									<el-button size="small" @click="handleNode('REFRESH', scope.row.datasourceId, node.dnNodeId)" icon="Refresh"></el-button>
								</el-descriptions-item>
							</block>
						</el-descriptions>
						<div style="margin: 0 auto;width:50%" v-if="scope.row.nodes == null || scope.row.nodes.length == 0">
							<el-popover trigger="hover"  placement="top" :width="300" :key="scope.row.datasourceId">
								<div style="text-align: right; margin: 0">
									<el-table :data="nodes" border style="width: 100%;margin-top: 5px;">
										<el-table-column prop="nodeCode" label="节点ID"></el-table-column>
										<el-table-column label="绑定">
											<template #default="scopeN">
												<el-button @click="saveNodeBind(scope.row.datasourceId, scopeN.row.nodeId)" type="success" size="small" icon="Check" circle plain></el-button>
											</template>
										</el-table-column>
									</el-table>
									<!--<el-button size="small" type="" @click="showDsId = null">关闭</el-button>
									<el-button size="small" type="primary" >
										确认绑定
									</el-button>-->
								</div>
								<template #reference>
									<el-button type="text" @click="handleNode('ADD', scope.row.datasourceId)"
										icon="DocumentAdd">绑定节点</el-button>
								</template>
								<!--<template #default>
									neirong
								</template>-->
							</el-popover>
						</div>
					</template>
				</el-table-column>
				<!--<el-table-column prop="datasourceBind" label="状态" width="100">
					<template #default="scope">
						<el-tag size="small" type="success" v-if="scope.row.datasourceBind == 1">已绑定</el-tag>
						<el-tag size="small" type="danger" v-if="scope.row.datasourceBind == 0">未绑定</el-tag>
						<el-link :underline="false">
							<el-icon :size="20" color="green" @click="restatus(scope.row.datasourceId)">
								<Refresh></Refresh>
							</el-icon>
						</el-link>
					</template>
				</el-table-column>-->
				<el-table-column prop="datasourceCreate" label="创建时间" width="150"></el-table-column>
				<el-table-column prop="datasourceId" label="操作" width="150">
					<template #default="scope">
						<el-button type="text" size="small" @click="openForm(scope.row)">编辑</el-button>
						<el-button type="text" size="small" @click="delNode(scope.row.datasourceId)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!-- 详情 -->
		<el-drawer v-model="detailDrawerVisible" title="数据源详情" direction="rtl">
			<el-descriptions :column="1" border direction="horizontal" :style="blockMargin"
				label-class-name="descriptions-label">
				<!--<el-descriptions-item label="所属节点">{{ossView?.nodeCode}}</el-descriptions-item>-->
				<el-descriptions-item label="数据源名称">{{ossView?.datasourceName}}</el-descriptions-item>
				<el-descriptions-item label="数据源类型">{{ossView?.datasourceType}}</el-descriptions-item>

				<el-descriptions-item label="endpoint">{{ossView?.datasourceOss.ossEndpoint}}</el-descriptions-item>
				<el-descriptions-item label="bucket">{{ossView?.datasourceOss.ossBucket}}</el-descriptions-item>
				<el-descriptions-item label="prefix">{{ossView?.datasourceOss.ossPrefix}}</el-descriptions-item>

				<el-descriptions-item label="accessKey">{{ossView?.datasourceOss.ossAccessKeyId}}</el-descriptions-item>
				<el-descriptions-item
					label="accessSecret">{{ossView?.datasourceOss.ossAccessKeySecret}}</el-descriptions-item>

				<el-descriptions-item
					label="virtualhost">{{ossView?.datasourceOss.ossVirtualhost}}</el-descriptions-item>
				<el-descriptions-item label="version">{{ossView?.datasourceOss.ossVersion}}</el-descriptions-item>
				<el-descriptions-item
					label="storageType">{{ossView?.datasourceOss.ossStorageType}}</el-descriptions-item>

				<!--<el-descriptions-item label="状态">
					<el-tag size="small" type="success" v-if="ossView.datasourceBind == 0">已绑定</el-tag>
					<el-tag size="small" type="danger" v-if="ossView.datasourceBind == 1">未绑定</el-tag>
				</el-descriptions-item>-->
			</el-descriptions>
		</el-drawer>
		<!--弹框-->
		<el-dialog title="数据源设置" v-model="datasourceForm.visible" width="60%">
			<el-form :model="datasourceForm" :rules="datasourceFormRules" ref="datasourceForm" label-width="100px">
				<el-row :gutter="10">
					<el-col :span="8">
						<h4>基础信息</h4>
						<el-form-item label="数据源类型" prop="type">
							<el-select v-model="datasourceForm.type" placeholder="请选择数据源类型">
								<el-option label="localfs（本地文件系统信息）" value="localfs" disabled="true"></el-option>
								<el-option label="oss（对象存储）" value="oss"></el-option>
								<el-option label="database（数据库）" value="database" disabled="true"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="数据源名称" prop="name">
							<el-input v-model="datasourceForm.name"></el-input>
						</el-form-item>
						<el-form-item label="绑定节点" prop="nodeIds" v-show="datasourceForm.id == null">
							<el-select v-model="datasourceForm.nodeIds" placeholder="请选择节点" multiple>
								<el-option v-for="item in nodes" :key="item.nodeId" :label="item.nodeCode"
									:value="item.nodeId"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<h4>数据源配置</h4>
						<el-form-item label="endpoint" prop="endpoint">
							<el-input v-model="datasourceForm.endpoint" placeholder=""></el-input>
						</el-form-item>
						<el-form-item label="bucket" prop="bucket">
							<el-input v-model="datasourceForm.bucket" placeholder=""></el-input>
						</el-form-item>
						<el-form-item label="prefix" prop="prefix">
							<el-input v-model="datasourceForm.prefix" placeholder=""></el-input>
						</el-form-item>
						<el-form-item label="access_key_id" prop="accessKey">
							<el-input v-model="datasourceForm.accessKey" placeholder=""></el-input>
						</el-form-item>
						<el-form-item label="access_key_secret" prop="accessSecret">
							<el-input v-model="datasourceForm.accessSecret" placeholder=""></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<h4>数据源配置</h4>
						<el-form-item label="virtualhost" prop="virtualhost">
							<!--<el-input v-model="datasourceForm.virtualhost" placeholder=""></el-input>-->
							<el-switch v-model="datasourceForm.virtualhost" active-value="0" inactive-value="1" />
						</el-form-item>
						<el-form-item label="version" prop="version">
							<el-input v-model="datasourceForm.version" placeholder=""></el-input>
						</el-form-item>
						<el-form-item label="storage_type" prop="storageType">
							<el-input v-model="datasourceForm.storageType" placeholder=""></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<el-button @click="closeForm">取 消</el-button>
				<el-button type="primary" @click="saveForm" :loading="loadSave">保 存</el-button>
			</template>
		</el-dialog>
	</div>
</body>
<script type="text/javascript" layout:fragment="fragment_script">
	const _data = {
		list: [],
		nodes: [],
		detailDrawerVisible: false,
		listStatus: null,
		listLoading: false,
		loadSave: false,
		popoverVisible: false,
		datasourceForm: {
			visible: false,
			id: '',
			nodeIds: '',
			type: 'oss',
			name: '',
			endpoint: '',
			bucket: '',
			prefix: '',
			accessKey: '',
			accessSecret: '',
			virtualhost: 0,
			version: '',
			storageType: ''
		},
		datasourceFormRules: {
			//nodeIds: [
			//{required: true, message: '不能为空', trigger: 'blur'}
			//],
			type: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],
			name: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],
			endpoint: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],
			bucket: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],
			prefix: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],
			accessKey: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],
			accessSecret: [
				{required: true, message: '不能为空', trigger: 'blur'}
			]
		},
		ossView: null
	}
	const _method = {
		loadNodes() {
			let that = this
			getRequst('/dataSource/nodesNotDs').then(function (resp) {
				that.nodes = resp.data
			})
		},
		openDetail(row) {
			this.ossView = row
			this.detailDrawerVisible = true
		},
		changeStatus(val) {
			this.listStatus = val
			this.loadList()
		},
		openForm(row) {
			if (row) {
				this.datasourceForm = {
					id: row.datasourceId,
					nodeId: row.datasourceNodeId,
					type: row.datasourceType,
					name: row.datasourceName,
					endpoint: row.datasourceOss.ossEndpoint,
					bucket: row.datasourceOss.ossBucket,
					prefix: row.datasourceOss.ossPrefix,
					accessKey: row.datasourceOss.ossAccessKeyId,
					accessSecret: row.datasourceOss.ossAccessKeySecret,
					virtualhost: row.datasourceOss.ossVirtualhost,
					version: row.datasourceOss.ossVersion,
					storageType: row.datasourceOss.ossStorageType,
					visible: true
				}
			} else {
				this.datasourceForm = {
					type: 'oss',
					virtualhost: 0,
				}
				this.datasourceForm.visible = true
			}
		},
		delNode(dataSourceId) {
			getRequst('/dataSource/remove?dataSourceId=' + dataSourceId).then(function (resp) {
				if (resp.status == 0) {
					that.loadList()
					that.$message({message: resp.msg, type: "success"});
				} else {
					that.$message({message: resp.msg, type: "error"});
				}
			})
		},
		closeForm() {
			this.$refs["datasourceForm"].resetFields();
			this.datasourceForm.visible = false
		},
		saveForm() {
			let that = this
			that.$refs["datasourceForm"].validate((valid) => {
				if (valid) {
					that.loadSave = true
					if(!that.datasourceForm.id && that.datasourceForm.nodeIds.length > 1){
						that.$message({message: '暂时只支持绑定一个节点', type: "error"});
						return false;
					}
					postRequst('/dataSource/create', that.datasourceForm).then(function (resp) {
						that.loadSave = false
						if (resp.status == 0) {
							that.loadList()
							that.datasourceForm.visible = false
							that.$refs["datasourceForm"].resetFields();
							that.$message({message: resp.msg, type: "success"});
						} else {
							that.$message({message: resp.msg, type: "error"});
						}
					})
				}
			});
		},
		loadList() {
			let that = this
			that.listLoading = true
			getRequst('/dataSource/list?status=' + that.listStatus).then(function (resp) {
				that.list = resp.data
				that.listLoading = false
			})
		},
		handleNode(action, datasourceId, nodeId) {
			if (action == 'DEL') {
				that.$messageBox.confirm('该操作将移除节点的数据源，是否继续?')
					.then(() => {
						let loading = that.$loading()
						getRequst('/dataSource/unBindNode?dataSourceId='+datasourceId+'&nodeId=' + nodeId).then(function (resp) {
							loading.close()
							if (resp.status == 0) {
								that.loadList()
								that.$message({message: resp.msg, type: "success"});
							} else {
								that.$message({message: resp.msg, type: "error"});
							}
						})
					})
					.catch(() => {
						// catch error
					})
			}
			if (action == 'REFRESH') {
				let loading = that.$loading()
				getRequst('/dataSource/restatus?dataSourceId='+datasourceId+'&nodeId=' + nodeId).then(function (resp) {
					loading.close()
					if (resp.status == 0) {
						that.loadList()
						that.$message({message: resp.msg, type: "success"});
					} else {
						that.$message({message: resp.msg, type: "error"});
					}
				})
			}
			if (action == 'ADD') {
				that.loadNodes()
			}
		},
		saveNodeBind(datasourceId, nodeId){
			let bd = {
				dataSourceId: datasourceId,
				nodeId: 	  nodeId
			}
			let loading = that.$loading()
			postRequst('/dataSource/bindNode', bd, true).then(function (resp) {
				loading.close()
				if (resp.status == 0) {
					that.loadNodes()
					that.loadList()
					that.$message({message: resp.msg, type: "success"});
				} else {
					that.$message({message: resp.msg, type: "error"});
				}
			})
		}
	}
	function _created() {
		this.loadNodes()
		this.loadList()
	}
	const _watch = {

	}
</script>

</html>